<template>
  <div class="inspection-record">
    <div class="container">
      <div class="buttonDiv">
        <button class="report-top-button" @click="back">返回上级页面</button>
      </div>
      <h1>现场验收检验批检查原始记录</h1>

      <table>
        <!-- Header row -->
        <tr class="head">
          <td class="head1">单位（子单位）工程名称</td>
          <td class="head2">{{ reportData.subproject_name }}</td>
          <td class="head3">检验批名称</td>
          <td class="head4">{{ reportData.inspectType }}</td>
        </tr>
        <!-- Second row -->
        <tr class="head">
          <td class="head1">检验批编号</td>
          <td class="head2">{{ reportData.streamNumber }}</td>
          <td class="head3">验收日期</td>
          <td class="head4">{{ reportData.finishDate[0] }} 年 {{ reportData.finishDate[1] }} 月
            {{ reportData.finishDate[2] }} 日
          </td>
        </tr>
      </table>
      <table class="table2">
        <!-- Table headers -->
        <tr class="content-row">
          <td class="body1">编号</td>
          <td class="body2">验收项目</td>
          <td class="body3">验收部位</td>
          <td class="body4">验收情况记录</td>
          <td class="body5">备注</td>
        </tr>
        <!-- Data rows -->
        <tr v-for="(item, index) in reportData.mainItems" :key="index" class="content-row" style="height: 80px">
          <td class="body11">{{ item.code }}</td>
          <td class="body22">{{ item.itemName }}</td>
          <td class="body33">{{ item.inspectPart }}</td>
          <td class="body44">{{ item.checkRecord }}</td>
          <td class="body55"></td>
        </tr>
        <tr v-for="(item, index) in reportData.generalItems" :key="index" class="content-row" style="height: 80px">
          <td class="body11">{{ item.code }}</td>
          <td class="body22">{{ item.itemName }}</td>
          <td class="body33">{{ item.inspectPart }}</td>
          <td class="body44">{{ item.checkRecord }}</td>
          <td class="body55"></td>
        </tr>
      </table>

      <div class="signatures">
        <div class="signature"><strong>质量员：{{ qualityInspector }}</strong></div>
        <div class="signature"><strong>施工员：{{ constructionInspector }}</strong></div>
        <div class="signature"><strong>监理旁站监督人：{{ supervisor }}</strong></div>
      </div>
      <div class="note">注：本表格由质量员在验收现场记录填写</div>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { searchOriginalInpsectCheckPreview } from '@/api/statementManage/yanShou/statementManage'

export default {
  data() {
    return {
      loading: true,   //这是一个加载标识
      reportData: {},  //这是报表数据接收变量
      localStorageId: '', // 用于存储id
      taskId: ''
    }
  },
  async mounted() {
    const localStorageId = this.$route.query.localStorageId
    this.localStorageId = localStorageId // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId)
      if (data) {
        this.reportData = JSON.parse(data)
        this.taskId = this.reportData.taskId
        console.log(this.reportData)
        console.log('taskId为：' + this.taskId)
      }
    }

    const { result } = await searchOriginalInpsectCheckPreview(this.taskId)
    console.log('接收接口的数据为：' + JSON.stringify(result))
    this.reportData = result

  },
  beforeDestroy() {       //这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;') //还原，因为这是个全局样式

  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') //设置对比色
  },
  methods: {
    back() {
      router.push({ path: '/menus/statement' })
    }
  }
}
</script>
<style scoped>
/* 全局容器样式 */
.inspection-record {
  font-family: '黑体', sans-serif;
  width: 70%;
  margin: 0 auto;
  background-color: white;
}

.container {
  width: 80%;
  border: 2px solid black;
  margin: 0 auto;
  padding: 50px;
}

.buttonDiv {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 标题样式 */
.inspection-record h1 {
  text-align: center;
  margin-bottom: 40px;
}

.report-top-button {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6); /* 建筑行业蓝色调，稳重且有活力 */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.report-top-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/* 表格基础样式 */
.inspection-record >>> table {
  width: 100%;
  border-collapse: collapse;
}

.inspection-record >>> th,
.inspection-record >>> td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
  height: 70px;
}

/* 表头样式 */
.inspection-record >>> th {
  background-color: #f2f2f2;
}

/* 表格内容单元格样式 */
.inspection-record >>> .body1 {
  width: 10%;
  border-top: none;
  font-weight: bold;
}

.inspection-record >>> .body2 {
  width: 20%;
  border-top: none;
  font-weight: bold;
}

.inspection-record >>> .body3 {
  width: 20%;
  border-top: none;
  font-weight: bold;
}

.inspection-record >>> .body4 {
  width: 30%;
  border-top: none;
  font-weight: bold;
}

.inspection-record >>> .body5 {
  width: 20%;
  border-top: none;
  font-weight: bold;
}

/* 表头单元格样式 */
.inspection-record >>> .head1 {
  width: 15%;
  font-weight: bold;
}

.inspection-record >>> .head3 {
  width: 10%;
  font-weight: bold;
}

.inspection-record >>> .head2 {
  width: 35%;
}

.inspection-record >>> .head4 {
  width: 40%;
}

/* 签名区域样式 */
.inspection-record .signatures {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
}

.inspection-record .signature {
  min-width: 200px;
}

/* 备注样式 */
.inspection-record .note {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
}

.content-row {
  font-weight: 500;
}

body {
  background-color: #f5f5f5;
}
</style>
